<template>
	<el-dialog
	  title="回款登记"
	  v-model="checkDialog"
	  width="700"
	  center
	  >
	  <div>
		<el-form class="pt20" style="padding-bottom: 0;" label-width="100px"
			:model="form" ref="queryForm" :inline="true">
			<el-form-item label="关联客户" prop="customerName">
				<el-input @focus="chooseCustomer" v-model="form.customerName" placeholder="请选择" clearable class="resetInput"
					style="width: 200px"/>
			</el-form-item>
			<el-form-item label="关联订单" prop="relatedOrder">
				<el-input @focus="chooseOrder" v-model="form.relatedOrder" placeholder="请选择" clearable class="resetInput"
					style="width: 200px"/>
			</el-form-item>
			<el-form-item label="回款金额" prop="paymentAmount">
				<el-input v-model="queryParams.keyword" placeholder="请选择" clearable class="resetInput"
					style="width: 200px"/>
			</el-form-item>
			<el-form-item label="回款日期" prop="paymentDate">
				<el-select v-model="queryParams.channelType" placeholder="请选择" size="large"
					style="width: 200px">
					<el-option v-for="dict in bus_channel" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="付款方式" prop="paymentMethod">
				<el-select v-model="form.paymentMethod" placeholder="请选择" size="large"
					style="width: 200px">
					<el-option v-for="dict in bus_pay_status" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="通知人员" prop="notifiedEmployeeId">
				<div>
					<el-select v-model="form.notifiedEmployeeId" placeholder="请选择" size="large"
						style="width: 200px">
						<el-option v-for="dict in teamOptions" :key="dict.userId" :label="dict.userName"
							:value="dict.userId" />
					</el-select>
					 <div class="color-red fs12">注：审批完成后，将自动通知到所选人员</div>
				</div>
			</el-form-item>
			<el-form-item label="备注信息" prop="paymentRemark">
				<el-input size="large" type="textarea" resize="none" class="textReset" style="width: 560px;"
				:rows="5" v-model="form.paymentRemark" placeholder="请输入信息"/>
			</el-form-item>
			<el-form-item label="付款截图" prop="paymentScreenshot">
				<el-upload
					name="file"
					class="avatar-uploader"
					:action="url"
					:headers="headers"
					:show-file-list="false"
					:on-success="handleAvatarSuccess"
					:before-upload="beforeAvatarUpload"
				 >
					<img v-if="form.paymentScreenshot" :src="form.paymentScreenshot" style="width: 110px;height: 110px;" />
					<div v-else>
						<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
						<div class="fs12">上传图片</div>
					</div>
				 </el-upload>
			</el-form-item>
		</el-form>	
	  </div>
	  <div slot="footer" class="dialog-footer text-right mt30">
		<el-button class="cancelSubBtn" @click="treeFormOpen = false">重 置</el-button>
		<el-button type="primary" @click="treeDataSubmit" class="mainSubBtn">确 定</el-button>
	  </div>
	</el-dialog>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	let url = import.meta.env.VITE_APP_BASE_API + "/common/upload"
	export default{		
		data(){
			return {
				headers: {
					Authorization: 'Bearer ' + getToken() // 这里的getToken方法需要你自己实现，用于获取你的Token
				},
				url: url,
				checkDialog:false,
				form:{
					customerId:'',//客户id
					customerName:'',//客户id
					relatedOrder:'',//关联订单
					paymentAmount:'',//回款金额
					paymentDate:'',//回款日期
					paymentMethod:'',//付款方式
					paymentScreenshot:'',//回款截图
					paymentRemark:'',//回款备注
					notifiedEmployeeId:'',//通知人员
				}
			}
		},
		methods:{
			handleAvatarSuccess(e) {
				this.queryParams.keyword = e.url
			},
			beforeAvatarUpload(e) {
				console.log(e, 'e2')
			},
		}
	}
</script>

<style>
</style>